<template>
  <div class="signup w-50 mx-auto">
    <ValidateForm @form-submit="handleFormSubmit">
      <ValidateInput :rules="emailRules" v-model="signupData.email" placeholder="请输入邮箱地址">
        <label class="label pb-10">邮箱地址：</label>
      </ValidateInput>
      <ValidateInput :rules="nickNameRules" v-model="signupData.nickName" placeholder="请输入昵称">
        <label class="label pb-10">昵 称：</label>
      </ValidateInput>
      <ValidateInput :rules="passwordRules" v-model="signupData.password" type="password" placeholder="请输入密码">
        <label class="label pb-10">密 码：</label>
      </ValidateInput>
      <ValidateInput :rules="repeatPasswordRules" v-model="signupData.repeatpassword" type="password" placeholder="请输入密码">
        <label class="label pb-10">重复密码：</label>
      </ValidateInput>
      <template #submit="">
        <button class="btn btn-primary">注册新用户</button>
      </template>
    </ValidateForm>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { useStore } from 'vuex';
import ValidateInput, { ruleProps } from '@/components/Form/ValidateInput.vue';
import ValidateForm from '@/components/Form/ValidateForm.vue';
// import fetchData from '../hooks/useAxios';
import createMessage from '@/components/createMessage';
const emailReg = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;

export default defineComponent({
  name: 'signup',
  components: { ValidateInput, ValidateForm },
  setup() {
    const signupData = reactive({
      email: '',
      nickName: '',
      password: '',
      repeatpassword: ''
    });
    const rangeLength = [6, 18];
    const emailRules: ruleProps = [
      { type: 'required', message: '电子邮箱地址不能为空' },
      {
        type: 'email',
        message: '请输入正确格式的邮箱',
        validate: (val: string): boolean => {
          return emailReg.test(val);
        }
      },
      {
        type: 'range',
        message: `请输入${rangeLength[0]} - ${rangeLength[1]}长度的值`,
        validate: (val: string): boolean => {
          return val.length >= rangeLength[0] && val.length <= rangeLength[1];
        }
      }
    ];
    const nickNameRules: ruleProps = [
      { type: 'required', message: '昵称不能为空' },
      {
        type: 'range',
        message: '请输入长度为2 - 20的值',
        validate: (val: string): boolean => {
          return val.length >= 2 && val.length <= 20;
        }
      }
    ];
    const passwordRules: ruleProps = [
      { type: 'required', message: '密码不能为空' },
      {
        type: 'range',
        message: `请输入${rangeLength[0]} - ${rangeLength[1]}长度的值`,
        validate: (val: string): boolean => {
          return val.length >= rangeLength[0] && val.length <= rangeLength[1];
        }
      }
    ];
    const repeatPasswordRules: ruleProps = [
      { type: 'required', message: '重复密码不能为空' },
      {
        type: 'custom',
        message: '重复密码验证失败',
        validate: (val: string): boolean => {
          return signupData.password === val;
        }
      }
    ];

    const route = useRoute();
    const router = useRouter();
    const store = useStore();
    const handleFormSubmit = async (val: boolean) => {
      console.log('handleFormSubmit', val);
      // signup success
      if (val) {
        const payload = {
          email: signupData.email,
          nickName: signupData.nickName,
          password: signupData.password
        };
        store
          .dispatch('signup', payload)
          .then(() => {
            createMessage('注册成功，跳转登录', 'success');
            setTimeout(() => {
              router.push({ name: 'login' });
            }, 200);
          })
          .catch(err => {
            console.log(err.response?.data?.error);
          });
      }
    };
    return {
      route,
      signupData,
      emailRules,
      nickNameRules,
      passwordRules,
      repeatPasswordRules,
      handleFormSubmit
    };
  }
});
</script>

<style></style>
